<template>
	<div class="purchase-order">
		<el-card>
			<div class="toolbar">
				<el-input v-model="filters.keyword" placeholder="搜索订单号/物料/供应商" clearable style="width:200px" />
				<el-select v-model="filters.status" clearable placeholder="订单状态" style="width:140px">
					<el-option label="待到货" value="待到货" />
					<el-option label="部分到货" value="部分到货" />
					<el-option label="已完成" value="已完成" />
				</el-select>
				<el-button type="primary" @click="openDialog()">新增订单</el-button>
			</div>
			<el-table :data="filteredOrders" border size="small" style="margin-bottom:18px;">
				<el-table-column prop="orderNo" label="采购订单号" width="130" />
				<el-table-column prop="material" label="物料名称" width="130" />
				<el-table-column prop="spec" label="规格" width="100" />
				<el-table-column prop="quantity" label="订购数量" width="100" />
				<el-table-column prop="supplier" label="供应商" width="120" />
				<el-table-column prop="status" label="状态" width="100">
					<template #default="scope">
						<el-tag :type="scope.row.status === '已完成' ? 'success' : (scope.row.status === '部分到货' ? 'warning' : 'info')">
							{{ scope.row.status }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="arrived" label="到货数量" width="100" />
				<el-table-column prop="orderDate" label="下单日期" width="110" />
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="removeOrder(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog v-model="dialog.visible" title="采购订单" width="420px">
			<el-form :model="dialog.data" label-width="92px">
				<el-form-item label="采购订单号">
					<el-input v-model="dialog.data.orderNo" />
				</el-form-item>
				<el-form-item label="物料名称">
					<el-input v-model="dialog.data.material" />
				</el-form-item>
				<el-form-item label="规格">
					<el-input v-model="dialog.data.spec" />
				</el-form-item>
				<el-form-item label="订购数量">
					<el-input-number v-model="dialog.data.quantity" :min="1" />
				</el-form-item>
				<el-form-item label="供应商">
					<el-input v-model="dialog.data.supplier" />
				</el-form-item>
				<el-form-item label="到货数量">
					<el-input-number v-model="dialog.data.arrived" :min="0" />
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="dialog.data.status" placeholder="请选择状态">
						<el-option label="待到货" value="待到货" />
						<el-option label="部分到货" value="部分到货" />
						<el-option label="已完成" value="已完成" />
					</el-select>
				</el-form-item>
				<el-form-item label="下单日期">
					<el-date-picker v-model="dialog.data.orderDate" type="date" value-format="YYYY-MM-DD"
						placeholder="选择日期" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dialog.data.remark" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="saveOrder">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 采购订单模拟数据
const orders = ref([
	{ orderNo: 'PO-20240601', material: '头孢曲松钠原料', spec: '500g/瓶', quantity: 100, supplier: '国药集团', status: '部分到货', arrived: 40, orderDate: '2024-06-01', remark: '首批采购' },
	{ orderNo: 'PO-20240602', material: '阿莫西林原粉', spec: '1kg/袋', quantity: 80, supplier: '华润医药', status: '待到货', arrived: 0, orderDate: '2024-06-02', remark: '' },
	{ orderNo: 'PO-20240603', material: '玻璃安瓿', spec: '10ml', quantity: 200, supplier: '恒瑞材料', status: '已完成', arrived: 200, orderDate: '2024-06-03', remark: '' },
	{ orderNo: 'PO-20240604', material: '硫酸镁', spec: '10kg/袋', quantity: 30, supplier: '复星化工', status: '部分到货', arrived: 15, orderDate: '2024-06-04', remark: '急单' },
	{ orderNo: 'PO-20240605', material: '铝箔', spec: '200mm×0.02mm', quantity: 60, supplier: '山东恒力', status: '已完成', arrived: 60, orderDate: '2024-06-05', remark: '' },
	{ orderNo: 'PO-20240606', material: '葡萄糖', spec: '25kg/包', quantity: 50, supplier: '山东新华', status: '待到货', arrived: 0, orderDate: '2024-06-06', remark: '' },
	{ orderNo: 'PO-20240607', material: '阿司匹林片', spec: '100片/瓶', quantity: 120, supplier: '云南白药', status: '待到货', arrived: 0, orderDate: '2024-06-07', remark: '常规' },
	{ orderNo: 'PO-20240608', material: '包装彩盒', spec: '20x15x8cm', quantity: 300, supplier: '广州包装', status: '部分到货', arrived: 180, orderDate: '2024-06-08', remark: '' },
	{ orderNo: 'PO-20240609', material: '聚乙烯薄膜', spec: '500m/卷', quantity: 40, supplier: '恒力材料', status: '已完成', arrived: 40, orderDate: '2024-06-09', remark: '' },
	{ orderNo: 'PO-20240610', material: '碳酸钙', spec: '5kg/袋', quantity: 90, supplier: '新华化工', status: '待到货', arrived: 0, orderDate: '2024-06-10', remark: '' },
	{ orderNo: 'PO-20240611', material: '乳糖', spec: '10kg/袋', quantity: 70, supplier: '鲁南药业', status: '部分到货', arrived: 36, orderDate: '2024-06-11', remark: '' },
	{ orderNo: 'PO-20240612', material: '乙醇', spec: '50L/桶', quantity: 25, supplier: '南方化学', status: '已完成', arrived: 25, orderDate: '2024-06-12', remark: '' },
	{ orderNo: 'PO-20240613', material: '瓶盖', spec: '2000个/箱', quantity: 10, supplier: '江苏伟业', status: '待到货', arrived: 0, orderDate: '2024-06-13', remark: '' },
	{ orderNo: 'PO-20240614', material: '铝塑泡罩板', spec: '100板/包', quantity: 60, supplier: '杭州包装', status: '部分到货', arrived: 36, orderDate: '2024-06-14', remark: '补货' },
	{ orderNo: 'PO-20240615', material: '维生素C原粉', spec: '1kg/袋', quantity: 85, supplier: '江苏天晴', status: '已完成', arrived: 85, orderDate: '2024-06-15', remark: '' }
])


const filters = ref({ keyword: '', status: '' })

const filteredOrders = computed(() => {
	return orders.value.filter(o =>
		(!filters.value.keyword || o.orderNo.includes(filters.value.keyword) || o.material.includes(filters.value.keyword) || o.supplier.includes(filters.value.keyword)) &&
		(!filters.value.status || o.status === filters.value.status)
	)
})

// 新增/编辑弹窗
const dialog = reactive({
	visible: false,
	data: { orderNo: '', material: '', spec: '', quantity: 1, supplier: '', status: '', arrived: 0, orderDate: '', remark: '' },
	editIndex: -1
})

function openDialog(row) {
	if (row) {
		dialog.data = { ...row }
		dialog.editIndex = orders.value.findIndex(o => o.orderNo === row.orderNo)
	} else {
		dialog.data = { orderNo: '', material: '', spec: '', quantity: 1, supplier: '', status: '', arrived: 0, orderDate: '', remark: '' }
		dialog.editIndex = -1
	}
	dialog.visible = true
}

function saveOrder() {
	if (dialog.editIndex >= 0) {
		orders.value[dialog.editIndex] = { ...dialog.data }
	} else {
		orders.value.unshift({ ...dialog.data })
	}
	dialog.visible = false
}

function removeOrder(idx) {
	orders.value.splice(idx, 1)
}
</script>

<style scoped>
.purchase-order {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
</style>
  
